<template>
    <div class="user">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 给组件绑定原生事件需要一个.native修饰符 -->
                <el-input placeholder="请输入内容" class="search-input" v-model="query" @keydown.native.enter="initList">
                    <el-button slot="append" icon="el-icon-search" @click="initList" ></el-button>
                </el-input>
                <el-button type="success" plain @click="addDialogFormVisible=true">添加用户</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table
            :data="userList"
            border
            style="width: 100%">
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
            prop="username"
            label="姓名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱"
            width="180">
            </el-table-column>
            <el-table-column
            prop="mobile"
            label="电话">
            </el-table-column>
            <el-table-column
            label="用户状态">
            <template slot-scope="scope">
                <el-switch v-model="scope.row.mg_state" @change="changeUserState(scope.row)">
                </el-switch>
            </template>
            </el-table-column>
            <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" plain icon="el-icon-edit" @click="showEditDialog(scope.row)"></el-button>
                <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="showDeleteDialog(scope.row)"></el-button>
                <el-button size="mini" type="warning" plain icon="el-icon-check" @click="showGrantDialog(scope.row)"></el-button>
            </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="3"
            :page-sizes="[1,2,3,4]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <!-- 添加用户对话框 -->
        <el-dialog title="添加用户" :visible.sync="addDialogFormVisible">
            <el-form :model="addForm" label-width=120px :rules="rules" ref="addUserForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                    <el-input v-model="addForm.mobile" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserSubmit('addUserForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑用户对话框 -->
        <el-dialog title="编辑用户" :visible.sync="editDialogFormVisible">
            <el-form :model="editForm" label-width=120px :rules="rules" ref="editUserForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="editForm.username" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                    <el-input v-model="editForm.mobile" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserSubmit('editUserForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分配角色对话框 -->
        <el-dialog title="分配角色" :visible.sync="grantDialogFormVisible">
            <el-form :model="grantForm" label-width=120px>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="grantForm.username" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>  
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="grantDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserSubmit()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分配角色对话框 -->
        <el-dialog title="分配角色" :visible.sync="grantDialogFormVisible">
            <el-form :model="grantForm" label-width=120px>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="grantForm.username" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>  
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="grantDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserSubmit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
           
<script>
import {getUserList,changeUserState,addUser,getUserById,editUser,deleteUser} from '@/api/index'
export default{
    data() {
      return {
        userList: [],
        value3:"",
        query:"",
        total:0,
        pageSize:3,
        pagenum:3,
        addDialogFormVisible:false,
        addForm:{
            username:"",
            email:"",
            mobile:""
        },
        rules:{
            username:{ required: true, message: '请输入用户名', trigger: 'blur' },
            password:{ required: true, message: '请输入密码', trigger: 'blur' },
            email:[
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                // { type: 'email',message: '请书写正确邮箱', trigger: 'change,blur' }
                ],
            mobile:{ required: true, message: '电话不能为空', trigger: 'blur' },

        },
        editDialogFormVisible:false,
        editForm:{
            username:"",
            password:"",
            email:"",
            mobile:"",
            id:0
        },
        grantDialogFormVisible:false,
        grantForm:{}


      }
    },
    //在生命周期函数created里发送数据
    created(){
        this.initList()
    },
    methods: {
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.initList()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pagenum = val;
        this.initList()
      },
      // 初始化表格数据
      initList(){
          getUserList({params:{query:this.query,pagenum:this.pagenum,pagesize:this.pageSize}}).then(res=>{
            //   console.log(res);
              this.userList = res.data.users;
              this.total = res.data.total;
              this.pagenum = 3;
              })
      },
      //更改用户状态
      changeUserState(row){
        changeUserState({uid:row.id,type:row.mg_state}).then(res=>{
            // console.log(res)
            if(res.meta.status===200){
                this.$message({
                    message: '修改用户状态成功',
                    type: 'success'
                })
            }else{
                this.$message({
                    message: '修改用户状态失败',
                    type: 'error'
                });
            }
        })

      },
      //添加用户
      addUserSubmit(formName){
        this.$refs[formName].validate(valid=>{
            if(valid){
                //添加用户方法
                addUser(this.addForm).then(res=>{
                    // console.log(res);
                    if(res.meta.status===201){
                        this.$message({
                        message: '创建用户成功',
                        type: 'success'
                        });
                        this.addDialogFormVisible = false;
                        this.initList()
                    }
                })

            }
        })
   
      },    
      // 编辑用户
      showEditDialog(row) {
        //   console.log(row)
          getUserById(row.id).then(res=>{
            //   console.log(res)
            this.editDialogFormVisible = true;
            if(res.meta.status===200){
                this.editForm.username = res.data.username;
                this.editForm.email = res.data.email;
                this.editForm.mobile = res.data.mobile;
                this.editForm.id = res.data.id
            }
          })   
      },
      //编辑用户提交
      editUserSubmit(formName){
          this.$refs[formName].validate(valid=>{
              if(valid){
                  editUser(this.editForm).then(res=>{
                      if(res.meta.status===200){
                          this.$message({
                              message:"编辑成功",
                              type:"success"
                          });
                          this.editDialogFormVisible = false;
                          this.initList()
                      }
                  })
              }
          })
      },
      // 显示删除对话框
      showDeleteDialog(row){
          this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            deleteUser(row.id).then(res => {
                // console.log(11111111)
                if(res.meta.status === 200) {
                        this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.initList()
                }
            })
            
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      showGrantDialog(row){
          
      }
    }
}
</script>
<style lang="scss" scoped>
    .user{
        .search-input{
            width: 300px;
        }
        .page {
            padding:5px 0;
            background-color: #D3DCE6;
        }
    }
</style>